<template>
  <div id="village">
    <div v-show="pageInfo.cur === 1">
      <f7-block-title>基本信息</f7-block-title>
      <f7-list id="village-form-1" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item title="乡镇名" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true, searchbar: true, searchbarPlaceholder: '按汉字进行搜索'}">
          <select name="town" v-model="townid">
            <optgroup v-for="t in place.filter(item => item.level === 1)" :label="t.pname">
              <option v-for="p in place.filter(item => item.pid === t.id)" :value="p.id">{{p.pname}}</option>
            </optgroup>
          </select>
        </f7-list-item>
        <f7-list-item class="cunname" title="村名" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true, searchbar: true, searchbarPlaceholder: '按汉字进行搜索'}">
          <select name="village" v-model="villageid">
            <optgroup v-for="v in place.filter(item => item.id === townid)" :label="v.pname">
              <option v-for="p in place.filter(item => item.pid === townid)" :value="p.id">{{p.pname}}</option>
            </optgroup>
          </select>
        </f7-list-item>
        <f7-list-item>
          <f7-label>督查组</f7-label>
          <f7-input type="text" readonly :value="user.name" name="inspector"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>督查时间</f7-label>
          <f7-input id="duchatime" type="text" name="time" readonly></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>村基本情况</f7-block-title>
      <f7-list id="village-form-2" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>户数</f7-label>
          <f7-input type="number" name="households"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>入数</f7-label>
          <f7-input type="number" name="numpeople"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>贫困户数</f7-label>
          <f7-input type="number" name="poor_households"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>贫困人数</f7-label>
          <f7-input type="number" name="poor_numpeople"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>低保户数</f7-label>
          <f7-input type="number" name="low_households"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>低保人数</f7-label>
          <f7-input type="number" name="low_numpeople"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>兜底户数</f7-label>
          <f7-input type="number" name="bottom_households"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>兜底人数</f7-label>
          <f7-input type="number" name="bottom_numpeople"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>搬迁户数</f7-label>
          <f7-input type="number" name="relocate_households" placeholder="易地扶贫搬迁对象户数"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>搬迁人数</f7-label>
          <f7-input type="number" name="relocate_numpeople" placeholder="易地扶贫搬迁对象人数"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>危房改造户数</f7-label>
          <f7-input type="number" name="decrepit_house" placeholder="危房改造户数"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>成护林员数</f7-label>
          <f7-input type="number" name="forester" placeholder="建档立卡人口就地转移成护林员数"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>脱贫时间</f7-label>
          <f7-input type="number" name="outpovertytime" placeholder="年份"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>计划减贫户数</f7-label>
          <f7-input type="number" name="planoutpoverty" :placeholder="`${new Date().getFullYear()}计划减贫户数`"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 2">
      <f7-block-title>基本设施</f7-block-title>
      <f7-list id="village-form-3" form bg-color="white" class="no-margin">
        <f7-list-item title="村组道路是否完成">
          <f7-toggle slot="after" name="village_road" @toggle:change="villageroad_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="villageroad_">
          <f7-label>村组道路未完成原因</f7-label>
          <f7-input type="textarea" name="village_road_reason"></f7-input>
        </f7-list-item>
        <f7-list-item title="安全饮水是否完成">
          <f7-toggle slot="after" name="safewater" @toggle:change="safewater_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="safewater_">
          <f7-label>安全饮水未完成原因</f7-label>
          <f7-input type="textarea" name="safewater_reason"></f7-input>
        </f7-list-item>
        <f7-list-item title="电力保障是否完成">
          <f7-toggle slot="after" name="power_supply" @toggle:change="powersupply_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="powersupply_">
          <f7-label>电力保障未完成原因</f7-label>
          <f7-input type="textarea" name="power_supply_reason"></f7-input>
        </f7-list-item>
        <f7-list-item title="通讯网络是否完成">
          <f7-toggle slot="after" name="network" @toggle:change="network_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="network_">
          <f7-label>通讯网络未完成原因</f7-label>
          <f7-input type="textarea" name="network_reason"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>基本保障</f7-block-title>
      <f7-list id="village-form-4" form bg-color="white" class="no-margin">
        <f7-list-item title="义务教育是否完成">
          <f7-toggle slot="after" name="education" @toggle:change="education_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="education_">
          <f7-label>义务教育未完成原因</f7-label>
          <f7-input type="textarea" name="education_reason"></f7-input>
        </f7-list-item>
        <f7-list-item title="基本医疗是否完成">
          <f7-toggle slot="after" name="medical" @toggle:change="medical_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="medical_">
          <f7-label>基本医疗未完成原因</f7-label>
          <f7-input type="textarea" name="medical_reason"></f7-input>
        </f7-list-item>
        <f7-list-item title="住房安全是否完成">
          <f7-toggle slot="after" name="housing_security" @toggle:change="housingsecurity_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="housingsecurity_">
          <f7-label>住房安全未完成原因</f7-label>
          <f7-input type="textarea" name="housing_security_reason"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 3">
      <f7-block-title>基础工作>村支“两委”建设</f7-block-title>
      <f7-list id="village-form-5" form bg-color="white" class="no-margin">
        <f7-list-item title="组织机构是否健全">
          <f7-toggle slot="after" name="organization"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>村支“两委”人数</f7-label>
          <f7-input type="number" name="organization_numpeople"></f7-input>
        </f7-list-item>
        <f7-list-item title="党支部记录是否健全">
          <f7-toggle slot="after" name="pbs_record"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="是否有定期召开扶贫工作会议记录">
          <f7-toggle slot="after" name="relief_meeting"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="年度考核是否合格">
          <f7-toggle slot="after" name="annual_assessment" @toggle:change="annualassessment_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="annualassessment_">
          <f7-label>年度考核不合格原因</f7-label>
          <f7-input type="textarea" name="annual_assessment_reason"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>基础工作>扶贫档案管理</f7-block-title>
      <f7-list id="village-form-6" form bg-color="white" class="no-margin">
        <f7-list-item title="贫困户识别>是否有入户调查">
          <f7-toggle slot="after" name="household_survey"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="贫困户识别>是否有民主评议">
          <f7-toggle slot="after" name="democratic_appraisal"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="贫困户识别>是否有公告公示">
          <f7-toggle slot="after" name="notice"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="定点扶贫单位实施帮扶项目情况清单">
          <f7-toggle slot="after" name="case_list"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="是否有扶贫小额信贷材料">
          <f7-toggle slot="after" name="credit_materials"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="贫困户退出>入户校验及贫困户认可材料">
          <f7-toggle slot="after" name="acceptance"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="贫困户退出>是否有公示公告材料">
          <f7-toggle slot="after" name="publicity"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="是否存在代签">
          <f7-toggle slot="after" name="allograph"></f7-toggle>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 4">
      <f7-block-title>基础工作</f7-block-title>
      <f7-list id="village-form-7" media-list form bg-color="white" class="no-margin">
        <f7-list-item title="村级公共服务" smart-select :smart-select-params="{openIn: 'popover'}">
          <select name="public_service" multiple>
            <option value="1">农业和农技服务</option>
            <option value="2">金融扶贫服务</option>
            <option value="3">助农取款服务</option>
            <option value="4">农村电商服务</option>
            <option value="5">医疗服务</option>
            <option value="6">文体活动</option>
            <option value="7">农村环境整治</option>
          </select>
        </f7-list-item>
        <f7-list-item id="publicproject" title="公开公示>村级公示项目" smart-select :smart-select-params="{openIn: 'popover'}">
          <select name="public_project" multiple>
            <option value="1">脱贫攻坚路线图</option>
            <option value="2">时间表</option>
            <option value="3">责任书和脱贫攻坚时间表</option>
            <option value="4">《农村扶贫开发条例》</option>
            <option value="5">《农村扶贫开发条例》解读漫画</option>
            <option value="6">扶贫攻坚实施规划摘要</option>
            <option value="7">省县乡监督举报电话</option>
          </select>
        </f7-list-item>
        <f7-list-item id="publicproject" title="公开公示>政策/项目/贫困对象管理公示" smart-select :smart-select-params="{openIn: 'popover'}">
          <select name="policy_item_poor" multiple>
            <option value="1">扶贫政策公示</option>
            <option value="2">扶贫资金项目详情公示</option>
            <option value="3">贫困对象名单公示</option>
            <option value="4">监督举报方式公示</option>
          </select>
        </f7-list-item>
      </f7-list>
      <f7-block-title>产业发展</f7-block-title>
      <f7-list id="village-form-8" form bg-color="white" class="no-margin">
        <f7-list-item title="有没有特色养殖业">
          <f7-toggle slot="after" name="farmed" @toggle:change="farmed_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="!farmed_">
          <f7-label>特色养殖业具体有啥</f7-label>
          <f7-input type="textarea" name="farmed_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否有合作社">
          <f7-toggle slot="after" name="cooperative" @toggle:change="cooperative_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="!cooperative_">
          <f7-label>合作社个数</f7-label>
          <f7-input type="number" name="cooperative_num"></f7-input>
        </f7-list-item>
        <f7-list-item v-show="!cooperative_">
          <f7-label>具体哪些合作社</f7-label>
          <f7-input type="textarea" name="cooperative_detail"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>村级集体经济收入</f7-block-title>
      <f7-list id="village-form-9" form bg-color="white" class="no-margin">
        <f7-list-item class="inline-labels">
          <f7-label>收入金额</f7-label>
          <f7-input type="number" name="collective_economic" placeholder="村级集体经济收入(万元)"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>主要来源项目</f7-label>
          <f7-input type="textarea" name="collective_economic_item"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 5">
      <f7-block-title>帮扶工作队情况</f7-block-title>
      <f7-list id="village-form-10" form bg-color="white" class="no-margin">
        <f7-list-item class="inline-labels">
          <f7-label>驻村帮扶单位</f7-label>
          <f7-input type="text" name="assist_team"></f7-input>
        </f7-list-item>
        <f7-list-item class="inline-labels">
          <f7-label>工作队人数</f7-label>
          <f7-input type="number" name="assist_team_numpeople" placeholder="驻村帮扶单位工作队人数"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否驻村">
          <f7-toggle slot="after" name="stay_village" @toggle:change="stayvillage_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="!stayvillage_">
          <f7-label>月宿村天数</f7-label>
          <f7-input type="number" name="stay_village_day"></f7-input>
        </f7-list-item>
        <f7-list-item class="inline-labels" title="是否有帮扶计划">
          <f7-toggle slot="after" name="support_plan"></f7-toggle>
        </f7-list-item>
        <f7-list-item class="inline-labels" title="是否有帮扶工作日志">
          <f7-toggle slot="after" name="job_record"></f7-toggle>
        </f7-list-item>
        <f7-list-item class="inline-labels" title="是否有信访台账">
          <f7-toggle slot="after" name="letters_parameter"></f7-toggle>
        </f7-list-item>
        <f7-list-item class="inline-labels" title="是否有信访台账">
          <f7-toggle slot="after" name="letters_parameter"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label style="font-size: 16px;">帮扶举措</f7-label>
          <f7-input type="textarea" name="supporting_measures"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>存在的问题</f7-block-title>
      <f7-list id="village-form-11" form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-input type="textarea" name="existing_problem"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 6">
      <f7-block-title>签字确认</f7-block-title>
      <f7-list id="village-form-12" form bg-color="white" class="no-margin">
        <f7-list-item class="inline-labels">
          <f7-label>扶贫工作队</f7-label>
          <f7-input type="text" name="poverty_relief_worker" v-model="prw" @input="prw = $event.target.value" :readonly="!!signature1"></f7-input>
        </f7-list-item>
        <f7-list-item media-list>
          <f7-label>扶贫工作队签字</f7-label>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-if="pageInfo.cur === 6" style="height: 228px;">
      <img v-if="!!signature1" :src="signature1" width="100%" height="100%">
    </div>
    <div class="hidesignature" :class="{ showsignature: pageInfo.cur === 6 && !signature1 }" style="top: 136px;">
      <vue-signature ref="signature1"></vue-signature>
      <f7-row>
        <f7-col>
          <f7-button small outline round color="red" @click="$refs.signature1.clear()">清除</f7-button>
        </f7-col>
        <f7-col>
          <f7-button small outline round @click="savesign('signature1')">确定</f7-button>
        </f7-col>
      </f7-row>
    </div>
    <div v-show="pageInfo.cur === 6">
      <f7-list id="village-form-13" form bg-color="white" class="no-margin">
        <f7-list-item class="inline-labels">
          <f7-label style="width: 120px;">村支书(村主任)</f7-label>
          <f7-input type="text" name="village_secretary" v-model="vsy" @input="vsy = $event.target.value" :readonly="!!signature2"></f7-input>
        </f7-list-item>
        <f7-list-item media-list>
          <f7-label>村支书(村主任)签字</f7-label>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-if="pageInfo.cur === 6" style="height: 228px;">
      <img v-if="!!signature2" :src="signature2" width="100%" height="100%">
    </div>
    <div class="hidesignature" :class="{ showsignature: pageInfo.cur === 6 && !signature2 }" style="top: 464px;">
      <vue-signature ref="signature2"></vue-signature>
      <f7-row>
        <f7-col>
          <f7-button small outline round color="red" @click="$refs.signature2.clear()">清除</f7-button>
        </f7-col>
        <f7-col>
          <f7-button small outline round @click="savesign('signature2')">确定</f7-button>
        </f7-col>
      </f7-row>
    </div>
  </div>
  </div>
</template>
<script>
import { f7BlockTitle, f7List, f7ListItem, f7Label, f7Input, f7Toggle, f7Row, f7Col, f7Button } from 'framework7-vue'
import { mapState, mapActions } from 'vuex'
import formatdate from 'utils/formatdate'
export default {
  components: {
    f7BlockTitle,
    f7List,
    f7ListItem,
    f7Label,
    f7Input,
    f7Toggle,
    f7Row,
    f7Col,
    f7Button
  },
  props: ['status'],
  computed: {
    ...mapState({
      user: state => state.user,
      pageInfo: state => state.page
    })
  },
  data() {
    return {
      townid: null,
      villageid: null,
      villageroad_: true,
      safewater_: true,
      powersupply_: true,
      network_: true,
      education_: true,
      medical_: true,
      housingsecurity_: true,
      annualassessment_: true,
      farmed_: true,
      cooperative_: true,
      stayvillage_: true,
      signature1: '',
      signature2: '',
      prw: '',
      vsy: '',
      context: this.$f7route.context
    }
  },
  created() {

    this.hassave = true
    this.setDate(1)

    this.update_page({ count: 6, cur: 1 })
    this.$root.$off('gopage').$on('gopage', type => {
      if (type === 0) {
        if (this.pageInfo.cur <= 1) return
        if (this.pageInfo.cur == this.pageInfo.count) {
          this.$refs.signature1.clear()
          this.$refs.signature2.clear()
        }
        this.pageInfo.cur -= 1
      } else {
        if (this.pageInfo.cur === this.pageInfo.count) return
        this.pageInfo.cur += 1
      }
    })

    this.$root.$off('save').$on('save', camera => {
      let param = {}
      for (var i = 1; i < 14; i++) {
        const form = this.$f7.form.convertToData('#village-form-' + i)
        param = Object.assign(param, form)
      }
      if (!param.town) {
        this.$f7.toast.show({ text: '请填写乡镇' })
        return
      }
      if (!param.village) {
        this.$f7.toast.show({ text: '请填写村' })
        return
      }
      if (!param.time) {
        this.$f7.toast.show({ text: '请填写督查时间' })
        return
      }
      if (this.signature1 || this.signature2) {
        if (camera) {
          this.$f7.dialog.alert('已签字，无法再上传图片')
          return
        }
        const text = []
        text.push(!!this.signature1 ? '扶贫工作队已签字' : '扶贫工作队未签字')
        text.push(!!this.signature2 ? '村支书(村主任)已签字' : '村支书(村主任)未签字')
        this.$f7.dialog.confirm(`<div>${text.join('</div><div>')}</div>`, '保存后无法修改，确定保存', () => {
          this.saveData(param)
        })
      } else {
        this.saveData(param, camera)
      }
    })
  },
  mounted() {
    var self = this
    let minDate = new Date()
    minDate.setDate(minDate.getDate() - 1)
    this.$f7.calendar.create({
      inputEl: '#duchatime>input',
      openIn: 'customModal',
      closeOnSelect: true,
      routableModals: false,
      animate: false,
      minDate,
      monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      dayNamesShort: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      on: {
        open: calendar => {
          this.$$('#framework7-root').append('<div class="calendar-backdrop backdrop-in"></div>').find('.calendar-backdrop').click(function() {
            self.$$(this).remove()
            calendar.close()
          })
          const time = this.$$('#duchatime>input').val()
          if (!time) return
          calendar.setValue([time])
        },
        close: calendar => {
          this.$$('#framework7-root .calendar-backdrop').remove()
        }
      }
    })

    this.$$('.hidesignature').touchmove(function(e) {
      e.preventDefault()
    })

    this.$f7.preloader.hide()
  },
  methods: {
    ...mapActions([
      'update_page'
    ]),
    savesign(i) {
      if (i === 'signature1' && !this.$$('input[name="poverty_relief_worker"]').val()) {
        this.$f7.toast.show({ text: '请先填写扶贫工作队' })
        return
      }
      if (i === 'signature2' && !this.$$('input[name="village_secretary"]').val()) {
        this.$f7.toast.show({ text: '请先填写村支书(村主任)' })
        return
      }
      this.$f7.dialog.confirm('请确保表单填写完整且签名无误', '', () => {
        this[i] = this.$refs[i].save()
      })
    },
    async saveData(param, camera) {
      param.edittime = formatdate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      param.poverty_relief_worker_sign = this.signature1
      param.village_secretary_sign = this.signature2
      if ((!!this.signature1 && !this.signature2) || (!this.signature1 && !!this.signature2)) {
        param.state = 1
      } else if (!!this.signature1 && !!this.signature2) {
        param.state = 2
        param.overtime = formatdate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      } else {
        param.state = 0
      }
      param.inspector = this.user.id
      for (let key in param) {
        if (param[key] === '') {
          delete param[key]
          continue
        }
        if (!Array.isArray(param[key])) continue
        if (['public_service', 'public_project', 'policy_item_poor'].indexOf(key) > -1) {
          param[key] = param[key].join(',')
          if (param[key] === '') {
            delete param[key]
          }
          continue
        }
        param[key] = param[key].length
      }
      this.requestId && (param.id = this.requestId)
      const village = await this.request('/village', param)
      if (village.code === 1) {
        this.requestId = this.$root.requestId = village.data
        this.hassave = true
        this.$emit('update:status', param.state)
        if (!camera) {
          this.$f7.toast.show({ text: village.msg })
        } else {
          camera(this.requestId)
        }
      } else {
        this.$f7.dialog.confirm(village.msg, '', () => {
          // 跳转到查看页面 TODO
        })
      }
    },
    async setDate(page) {
      const { id, type } = this.context
      if ((id || this.requestId) && this.hassave) {
        const { data } = await this.request('/getdata', { id: id || this.requestId, type })
        if (!data && !data.id) return
        this.requestId = data.id
        this.viewdata = data
        this.hassave = false
      }
      if (!this.viewdata) return
      if (page === 1) {
        for (let key in this.viewdata) {
          if ('town,inspector'.indexOf(key) > -1) {
            this.$f7.form.fillFromData('#village-form-1', {
              [key]: this.viewdata[key === 'inspector' ? 'inspectorname' : key]
            })
            continue
          }
          if ('village' === key) {
            this.$nextTick(() => {
              this.$f7.form.fillFromData('#village-form-1', { 'village': this.viewdata.village })
            })
            continue
          }
          if ('time' === key) {
            this.$$(`[name='time']`).val(formatdate(new Date(this.viewdata.time), 'yyyy-MM-dd'))
          }
          if ('households,numpeople,poor_households,poor_numpeople,low_households,low_numpeople,bottom_households,bottom_numpeople,relocate_households,relocate_numpeople,decrepit_house,forester,outpovertytime,planoutpoverty'.indexOf(key) > -1) {
            this.$f7.form.fillFromData('#village-form-2', {
              [key]: this.viewdata[key]
            })
            continue
          }
        }
      } else if (page === 2) {
        this.$f7.form.fillFromData('#village-form-3', {
          village_road: this.viewdata.village_road ? [''] : [],
          village_road_reason: this.viewdata.village_road_reason,
          safewater: this.viewdata.safewater ? [''] : [],
          safewater_reason: this.viewdata.safewater_reason,
          power_supply: this.viewdata.power_supply ? [''] : [],
          power_supply_reason: this.viewdata.power_supply_reason,
          network: this.viewdata.network ? [''] : [],
          network_reason: this.viewdata.network_reason
        })
        this.$f7.form.fillFromData('#village-form-4', {
          education: this.viewdata.education ? [''] : [],
          education_reason: this.viewdata.education_reason,
          medical: this.viewdata.medical ? [''] : [],
          medical_reason: this.viewdata.medical_reason,
          housing_security: this.viewdata.housing_security ? [''] : [],
          housing_security_reason: this.viewdata.housing_security_reason
        })
      } else if (page === 3) {
        this.$f7.form.fillFromData('#village-form-5', {
          organization: this.viewdata.organization ? [''] : [],
          organization_numpeople: this.viewdata.organization_numpeople,
          pbs_record: this.viewdata.pbs_record ? [''] : [],
          relief_meeting: this.viewdata.relief_meeting ? [''] : [],
          annual_assessment: this.viewdata.annual_assessment ? [''] : [],
          annual_assessment_reason: this.viewdata.annual_assessment_reason
        })
        this.$f7.form.fillFromData('#village-form-6', {
          household_survey: this.viewdata.household_survey ? [''] : [],
          democratic_appraisal: this.viewdata.democratic_appraisal ? [''] : [],
          notice: this.viewdata.notice ? [''] : [],
          case_list: this.viewdata.case_list ? [''] : [],
          credit_materials: this.viewdata.credit_materials ? [''] : [],
          acceptance: this.viewdata.acceptance ? [''] : [],
          publicity: this.viewdata.publicity ? [''] : [],
          allograph: this.viewdata.allograph ? [''] : []
        })
      } else if (page === 4) {
        this.$f7.form.fillFromData('#village-form-7', {
          public_service: this.viewdata.public_service ? this.viewdata.public_service.split(',') : '',
          public_project: this.viewdata.public_project ? this.viewdata.public_project.split(',') : '',
          policy_item_poor: this.viewdata.policy_item_poor ? this.viewdata.policy_item_poor.split(',') : ''
        })
        this.$f7.form.fillFromData('#village-form-8', {
          farmed: this.viewdata.farmed ? [''] : [],
          farmed_detail: this.viewdata.farmed_detail,
          cooperative: this.viewdata.cooperative ? [''] : [],
          cooperative_num: this.viewdata.cooperative_num,
          cooperative_detail: this.viewdata.cooperative_detail
        })
        this.$f7.form.fillFromData('#village-form-9', {
          collective_economic: this.viewdata.collective_economic,
          collective_economic_item: this.viewdata.collective_economic_item
        })
      } else if (page === 5) {
        this.$f7.form.fillFromData('#village-form-10', {
          assist_team: this.viewdata.assist_team,
          assist_team_numpeople: this.viewdata.assist_team_numpeople,
          stay_village: this.viewdata.stay_village ? [''] : [],
          stay_village_day: this.viewdata.stay_village_day,
          support_plan: this.viewdata.support_plan ? [''] : [],
          job_record: this.viewdata.job_record ? [''] : [],
          letters_parameter: this.viewdata.letters_parameter ? [''] : [],
          supporting_measures: this.viewdata.supporting_measures
        })
        this.$f7.form.fillFromData('#village-form-11', {
          existing_problem: this.viewdata.existing_problem
        })
      } else if (page === 6) {
        if (this.viewdata.poverty_relief_worker_sign) {
          this.signature1 = (new Buffer(this.viewdata.poverty_relief_worker_sign, 'base64')).toString('utf8')
        }
        if (this.viewdata.village_secretary_sign) {
          this.signature2 = (new Buffer(this.viewdata.village_secretary_sign, 'base64')).toString('utf8')
        }
        this.$f7.form.fillFromData('#village-form-12', {
          poverty_relief_worker: this.viewdata.poverty_relief_worker
        })
        this.prw = this.viewdata.poverty_relief_worker
        this.$f7.form.fillFromData('#village-form-13', {
          village_secretary: this.viewdata.village_secretary
        })
        this.vsy = this.viewdata.village_secretary
      }
    }
  },
  watch: {
    'townid': function() {
      this.villageid = ''
      this.$$('#village .cunname .item-after').html('')
    },
    'pageInfo.cur': function() {
      this.$nextTick(() => {
        this.setDate(this.pageInfo.cur)
        this.$$('#village').scrollTop(0)
      })
    }
  }
}
</script>
<style>
[data-select-name="public_project"] {
  width: 350px!important;
}
</style>